<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>联机大厅</title>
  <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
  <style>
    body {
        margin: 0;
        font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        overflow: hidden;
      }
      
      #sidebar {
        position: fixed;
        width: 250px;
        height: 100%;
        background: linear-gradient(to bottom, #4CAF50, #45a049, #3498db, #2980b9);
        color: white;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        animation: slideIn 1s ease-in-out;
        border: 2px solid #FFF; /* 添加边框 */
        border-radius: 10px; /* 添加圆角 */
      }
      
      #personalInfo {
        /* Personal information styles */
        margin-bottom: 20px;
      }
      
      #chatBox {
        /* Chat box styles */
        overflow-y: scroll;
        height: 300px;
        padding: 10px;
        background: linear-gradient(to bottom, #FFC107, #FFA000, #E91E63, #9C27B0);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        color: black;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        animation: fadeIn 1s ease-in-out;
        border: 2px solid #000; /* 添加边框 */
        border-radius: 10px; /* 添加圆角 */
      }
      
      #inputMessage {
        /* Input message styles */
        width: calc(100% - 20px);
        padding: 5px;
        margin-top: 10px;
        border: 2px solid #000; /* 添加边框 */
        border-radius: 10px; /* 添加圆角 */
      }
      
      #videoContainer {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
        animation: zoomVideo 5s infinite alternate;
      }
      
      video {
        /* Video styles */
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      @keyframes slideIn {
        from {
          transform: translateX(-100%);
        }
        to {
          transform: translateX(0);
        }
      }
      
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      
      @keyframes zoomVideo {
        0% {
          transform: scale(1);
        }
        100% {
          transform: scale(1.1);
        }
      }
  </style>
</head>
<body>

  <div id="videoContainer">
    <video autoplay muted loop>
      <!-- Replace 'video.mp4' with your video file -->
      <source src="http://localhost:3000/vedioes/background.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>

  <div id="sidebar">
    <div id="personalInfo">
      <!-- Personal Information -->
      <h2>Personal Information</h2>
      <!-- Your personal information goes here -->
      <p>Name: John Doe</p>
      <p>Email: john@example.com</p>
      <!-- Add more personal information as needed -->
    </div>

    <div id="chatBox">
      <!-- Chat Box -->
      <h2>Chat Box</h2>
      <div id="chatMessages"></div>
      <input type="text" id="inputMessage" placeholder="Type a message...">
      <button onclick="sendMessage()">Send</button>
    </div>
  </div>

  <script>
    function sendMessage() {
      // Function to send messages
      const messageInput = document.getElementById('inputMessage');
      const message = messageInput.value;
      
      // You can perform further actions here, like sending the message over WebSocket
      
      // For demonstration, we'll just log the message to console
      console.log('Message:', message);

      // Clear the input field after sending the message
      messageInput.value = '';
    }
  </script>
  <script>
    
  </script>

</body>
</html>
